<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>axios基本使用</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.min.js"></script>
    </head>
    <body>
        <button>点击发送 GET 请求</button>
        <button>async 和 await</button>
        <button>点击发送 POST 请求</button>

        <script>
            //获取按钮
            let btns = document.querySelectorAll('button');

            //绑定事件
            btns[0].onclick = function(){
                //axios 函数    参数『配置对象』
                // 返回结果是一个 promise 对象     sendAJAX
                axios({
                    method: 'get',
                    url: 'http://api.xiaohigh.com/douyin'
                }).then(res => {
                    console.log(res);
                }, error => {
                    console.dir(error);
                })
            }
        
            //绑定事件 『必须必要练熟悉』
            btns[1].onclick = async function(){
                try{
                    //method 属性的默认值为 『get』
                    let result = await axios({
                        url: 'http://api.xiaohigh.com/douyin'
                    });

                    console.log(result);
                }catch(e){
                    console.log('请求失败啦!! 响应状态码为' + e.response.status);
                }
            }

            //发送 post 请求
            btns[2].onclick = async function(){
                //发送 post 请求
                let res = await axios({
                    method: 'post',
                    url: 'http://127.0.0.1:3000/movie',
                    //请求体    JSON
                    data: {
                        name: '心灵奇旅',
                        director: '不认识'
                    }

                    //请求体  querystring
                    // data: 'name=寻梦环游记&director=不认识'
                });

                console.log(res);


            }

        </script>
    </body>
</html>
